<template>
	<view>
		<view class="Release">
			<!-- 学生认证 -->
			<view class="Release1" :class="Type===0?'aaa':''" @click="onRelease(0)">
				<image class="Release2" style="width: 120rpx;height: 120rpx;left: 50rpx;margin-top: 10rpx;"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83-%E4%B8%80%E9%94%AE%E8%AE%A4%E8%AF%81-My_authentication/%E5%AD%A6%E7%94%9F.png"
					mode=""></image>
				<view class="Release3" :class="Type===0?'Release4':''">
					<text>学生认证</text>
				</view>
			</view>
			<!-- 跑腿认证 -->
			<view class="Release5" :class="Type===1?'aaa':''" @click="onRelease(1)">
				<image class="Release2" style="top: 10rpx;left: 40rpx;"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83-%E4%B8%80%E9%94%AE%E8%AE%A4%E8%AF%81-My_authentication/%E8%B7%91%E8%85%BFAPP.png"
					mode=""></image>
				<view class="Release3" :class="Type===1?'Release4':''">
					<text>跑腿认证</text>
				</view>
			</view>
			<!-- 商户资质认证 -->
			<view class="Release6" :class="Type===2?'aaa':''" @click="onRelease(2)">
				<image class="Release2" style="left: 32rpx;top: -10rpx;"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83-%E4%B8%80%E9%94%AE%E8%AE%A4%E8%AF%81-My_authentication/%E9%A3%9F%E5%93%81%E9%A4%90%E9%A5%AE%E8%B5%84%E8%B4%A8.png"
					mode=""></image>
				<view class="Release3" :class="Type===2?'Release4':''">
					<text>资质认证</text>
				</view>
			</view>
		</view>
		<!-- 学生认证 -->
		<view class="" v-if="Type===0">
			<!-- 开始 学生姓名-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">学生姓名</text>
				<uni-easyinput v-model="Stuname" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您真实的姓名" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 学生姓名-->

			<!-- 开始 学生学号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">学生学号</text>
				<uni-easyinput v-model="Stuid" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您真实的学号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 学生学号-->

			<!-- 开始 联系方式-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">手机号码</text>
				<uni-easyinput v-model="Stuphone" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的联系方式" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->
			<!-- 开始 提交认证信息-->
			<view class="Run_55" style="margin-top: 10rpx;">
				<text class="Run_5_1">提交认证信息</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;">
					<uni-file-picker  v-model="imageValue" fileMediatype="image" @select="select" limit="1"
						title="提交学生证照片或电子证件截图"  auto-upload="true"></uni-file-picker>
				</view>
			</view>
			<!-- 结束 提交认证信息-->
			<!-- 发布按钮 -->
			<button class="uniBt_but uniBt_but22" type="warn" size="default" @click="ReleaseGo(0)">提交认证</button>
			<view style="padding-top: 440rpx;">
			</view>
		</view>

		<!-- 跑腿认证 -->
		<view class="" v-if="Type===1">
			<!-- 开始 学生姓名-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">学生姓名</text>
				<uni-easyinput v-model="PtStuname" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您真实的姓名" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 学生姓名-->
			
			<!-- 开始 学生学号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">学生学号</text>
				<uni-easyinput v-model="PtStuid" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您真实的学号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 学生学号-->
			
			<!-- 开始 所在宿舍-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">所在宿舍</text>
				<uni-easyinput v-model="Ptdormitory" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的宿舍地址" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 所在宿舍-->
			
			<!-- 开始 联系方式-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">手机号码</text>
				<uni-easyinput v-model="Ptphone" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的手机号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->
			
			<!-- 开始 联系方式-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">微信号码</text>
				<uni-easyinput v-model="Ptwx" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的微信号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->
			
			<!-- 开始 提交认证信息-->
			<view class="Run_55" style="margin-top: 10rpx;">
				<text class="Run_5_1">提交认证信息（学生证和身份证）</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;">
					<uni-file-picker  v-model="imageValue" fileMediatype="image" @select="select" limit="3"
						title="提交学生证照片和身份证信息那面截图"  auto-upload="true"></uni-file-picker>
				</view>
			</view>
			<!-- 结束 提交认证信息-->
			
			<!-- 发布按钮 -->
			<button class="uniBt_but uniBt_but222" type="warn" size="default" @click="ReleaseGo(1)">提交认证</button>
			<view style="padding-top: 440rpx;">

			</view>
		</view>
		<!-- 资质认证 -->
		<view class="" v-if="Type===2">
			<!-- 开始 单位名称-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">单位名称</text>
				<uni-easyinput v-model="Storename" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="店面叫什么" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 单位名称-->


			<!-- 开始 所属食堂-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">所属食堂</text>
				<uni-easyinput v-model="Canteen" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写单位所属的食堂或位置" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 所属食堂-->

			<!-- 开始 负责人员-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">负责人员</text>
				<uni-easyinput v-model="FzPerson" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写单位负责人的姓名" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 负责人员-->
			
			<!-- 开始 手机号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">手机号码</text>
				<uni-easyinput v-model="Shphone" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写负责人联系方式" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 手机号-->

			<!-- 开始 微信号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">微信号码</text>
				<uni-easyinput v-model="Shwx" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					type="number" :placeholderStyle="placeholderStyle" placeholder="请填写负责人微信号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 微信号-->
			<!-- 开始 提交认证信息-->
			<view class="Run_55" style="margin-top: 10rpx;">
				<text class="Run_5_1">上传相关证明</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;">
					<uni-file-picker  v-model="imageValue" fileMediatype="image" @select="select" limit="3"
						title="提交营业执照或其他有利证明是至诚商户"  auto-upload="true"></uni-file-picker>
				</view>
			</view>
			<!-- 结束 提交认证信息-->
			
			<!-- 发布按钮 -->
			<button class="uniBt_but uniBt_but222"  type="warn" size="default"
				@click="ReleaseGo(2)">提交认证</button>
			<view style="padding-top: 440rpx;">

			</view>
		</view>
		<zdy-tabbar :current-page="1"></zdy-tabbar>
	</view>
</template>

<script>
	import QQMapWX from '../../../js_sdk/lib/qqmap-wx-jssdk.min.js'
	import uploadImage from '../../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				start: 0, //统计字数
				imageValue: [], //临时存图片对象数据
				Type: 0, //切换的类型
				styles: {
					color: '#f00',
				},
				items: [{
						value: '1',
						name: '寻物'
					},
					{
						value: '2',
						name: '拾物'
					},
				],
				infaddress: '', //定位信息
				//学生认证信息
				Stuname: '', //学生姓名
				Stuid:'',    //学生学号
				Stuphone: '', //联系方式
				StuImage: [], //图片数组
				//跑腿认证
				PtStuname: '', //学生姓名
				PtStuid: '', //学生学号
				Ptdormitory: '', //学生宿舍
				Ptphone: '', //联系方式手机号
				Ptwx: '', //联系方式微信号
				PtImage: [], //闲置图片集
				//商户资质认证
				Storename:'',//单位名称
				Canteen:'',//所属食堂
				FzPerson:'',//负责人员
				Shphone:'',//负责人手机号
				Shwx:'',//负责人微信号
				ShImage: [], //资质认证图片集
				

			};
		},
		onLoad() {
			this.GetLocation()
		},
		watch: {
			//监听自定义变量，当值为1时（网络请求成功完毕），执行后续操作
			//其中形参newVal代表变量isInit改变后的值，oldval代表isInit改变前的值
			// isInit:function(newVal,oldVal){
			// 	if(newVal==1){
			// 		//请求后续操作
			// 		this.ReleaseGo_MY()
			// 	}
			// }
		},
		methods: {
			//导航栏  触发 选择不同类型的填写
			onRelease(e) {
				this.Type = e
			},
			descInput() {
				this.start = this.SwText.length
			},
			//获取上传状态
			select(e) {
				console.log('选择文件：', e)
				//this.uploadOss()
				//this.imageValue=[]
			},
			//上传图片
			uploadOss() {
				//支持多图上传
				const that = this
				for (var i = 0; i < this.imageValue.length; i++) {
					//显示消息提示框
					uni.showLoading({
						mask: true
					})
					uploadImage(this.imageValue[i].image.location, 'UserRunImg/',
						result => {
							if (that.Type === 0) {
								that.StuImage.push(result)
							} else if (that.Type === 1) {
								that.PtImage.push(result)
							}else if(taht.Type===2){
								that.ShImage.push(result)
							}
							uni.hideLoading();
							//成功之后，可以将result带去执行其它方法或者赋值
							if (that.imageValue.length === that.StuImage.length) {
								that.ReleaseGo_MY()
							} else if (that.imageValue.length === that.PtImage.length) {
								that.ReleaseGo_MY()
							}else if(that.imageValue.length === that.ShImage.length){
								that.ReleaseGo_MY()
							}
						}, result => {
							//这里写上传失败的代码 
							console.log(JSON.stringify(result));
						})
				}
			},
			//单选按钮
			radioFawei(item) {
				this.Swtype = item.value
			},
			//兼职绑定弹出框信息
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.Jzprice_tyep = this.array[this.index]
			},
			//闲置绑定弹出分类选中
			bindPickerChange_xz: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index1 = e.detail.value
				this.Xztype = this.array1[this.index1]
			},
			//兼职日期
			bindPickerChange_Jzdate: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index2 = e.detail.value
				this.Jzdata = this.array2[this.index2]
			},
			//兼职单位类型
			bindPickerChange_Jzddwteype: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index3 = e.detail.value
				this.Jztype = this.array3[this.index3]
			},
			//立即发布
			ReleaseGo(e) {
				if (e === 0) {
					this.uploadOss(e)
				} else if (e === 1) {
					this.uploadOss(e)
				} else {
					this.uploadOss(e)
				}
			},
			ReleaseGo_MY() {
				if (this.Type === 0) {
					console.log(this.Stuname + " " + this.Stuid + " " + this.Stuphone + " " + this.StuImage)
					uni.$showMsg("认证提交成功，等待审核！")
					setTimeout(function() {
						uni.navigateBack({
							
						})
					}, 2000)

				} else if (this.Type === 1) {
					console.log(this.PtStuname + " " + this.PtStuid + " " + this.Ptdormitory + " " + this.Ptphone + " " + this
						.Ptwx + " " + this.PtImage)
					uni.$showMsg("认证提交成功，等待审核！")
					setTimeout(function() {
						uni.navigateBack({
							
						})
					}, 2000)
				} else {
					console.log(this.Storename + " " + this.Canteen + " " + this.FzPerson + " " + this.Shphone + " " + this.Shwx +
						" " + this.ShImage)
					uni.$showMsg("认证提交成功，等待审核！")
					setTimeout(function() {
						uni.navigateBack({
							
						})
					}, 2000)
				}
			},
			// 获取经纬度
			GetLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					//sHighAccuracy:true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('当前位置：' + res);

						that.GetNowCityInfo(res) //获取城市信息
					}
				});
			},
			// 获取当前城市信息
			GetNowCityInfo(lag) {
				const that = this
				let qqmapsdk = new QQMapWX({
					key: 'EETBZ-J2SH2-MURUX-CSGRT-CCRSS-NYBGN' //腾讯地图 - 申请开发者密钥（key）
				});
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: lag.longitude,
						latitude: lag.latitude
					},
					success(res) {
						console.log('当前位置信息', res)
						that.infaddress = res.result.formatted_addresses.recommend
						if (res.status == 0 && res.message == "query ok") {
							let city = res.result.address_component.city;
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.Release {
		height: 200rpx;
	}

	.Release1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;

	}

	.Release2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		width: 140rpx;
		height: 140rpx;
		left: 36rpx;
	}

	.Release3 {
		position: absolute;
		align-self: center;
		padding: 2px 2px 2px 2px;
		box-sizing: border-box;
		top: 150rpx;
		left: 30rpx;
		font-size: 15px;
		color: rgb(153, 153, 153);
		text-align: center;
		width: 160rpx;

	}

	.aaa {
		box-shadow: 5px 10px 10px #51d3d3;
	}

	.Release4 {
		font-size: 18px;
		color: #51d3d3;
		border-bottom: 3px solid #51d3d3;
		font-family: cursive;
		font-weight: 900;

	}

	.Release5 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;
		margin-left: 240rpx;
	}

	.Release6 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;
		margin-left: 480rpx;
	}

	//取件时间样式
	.Run_5 {
		position: relative;
		left: 34rpx;
		top: 50rpx;
		width: 688rpx;
		height: 132rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;
		box-shadow: 5px 10px 10px #51d3d3;

	}

	.Run_5_1 {
		border-width: 0px;
		position: absolute;
		left: 36rpx;
		top: 45rpx;
		width: 600rpx;
		height: 38rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: bold;
		font-style: normal;
	}

	.abe {
		position: absolute;
		left: 580rpx;
		top: 200rpx;
		font-size: 12px;
	}

	.Reaade1 {
		position: absolute;
		top: 80rpx;
		left: 55rpx;
	}

	.Run_55 {
		position: relative;
		left: 34rpx;
		top: 50rpx;
		width: 688rpx;
		height: 390rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;
		box-shadow: 5px 10px 10px #51d3d3;

	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 25rpx;
		top: 950rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.uniBt_but22 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 100px;
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 15px;
		margin-top: 200rpx;
		margin-left: 0rpx;
	}

	.uniBt_but222 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 100px;
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 15px;
		margin-top: 500rpx;
		margin-left: 0rpx;
	}

	.Run_fw_labe2 {
		display: flex;
		width: 300rpx;
		padding-top: 40rpx;
		margin-left: 160rpx;
		font-size: 18px;
	}

	.Run_fw_1 {
		position: absolute;
		top: 0px;
		left: 60rpx;
		padding-top: 4rpx;
	}

	//定位
	.down23 {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 20rpx;
		top: 520rpx
	}

	.maerq1 {
		position: absolute;
		top: 526rpx;
		left: 60rpx;
		font-size: 24rpx;
		color: #C1C0C0;
	}

	.Run_4_4 {
		border-width: 0px;
		position: absolute;
		left: 310px;
		top: 24px;
		width: 22px;
		height: 20px;
		display: flex;
	}
</style>
